<template>
	<div :class="curClassName" :style="curStyle">
		<AuthPuzzleCode :show="show" @success="onSuccess" @fail="onFail" />
		<a-button :type="type" @click="executeOpen"
			>验证<CheckOutlined v-show="showIcon"
		/></a-button>
	</div>
</template>
<script setup lang="ts">
import { LoginCaptchaProps } from './login-captcha';
import { CheckOutlined } from '@ant-design/icons-vue';
import AuthPuzzleCode from './components/vue-puzzle-code.vue';
import { Ref } from 'vue';
import { IEvent } from '@/core';

const props = defineProps(LoginCaptchaProps);

interface LoginCaptchaEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<LoginCaptchaEmit>();

/**
 * 项名称
 *
 * @memberof LoginCaptcha
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof LoginCaptcha
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof LoginCaptcha
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-login-captcha': true,
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 是否显示
 */
let show: Ref<boolean> = ref(false);

/**
 * 按钮类型
 */
const type: Ref<string> = ref('default');

/**
 * 显示按钮
 */
const showIcon: Ref<boolean> = ref(false);

/**
 * 打开
 */
const executeOpen = () => {
	show.value = true;
};

/**
 * 成功
 */
const onSuccess = () => {
	show.value = false;
	type.value = 'primary';
	showIcon.value = true;
	emit('component-action', {
		name: props.name,
		action: 'valueChange',
		data: true,
	});
};

/**
 * 失败
 */
const onFail = () => {
	showIcon.value = false;
	emit('component-action', {
		name: props.name,
		action: 'valueChange',
		data: false,
	});
};
</script>
